<template>
  <div class="coat">
    <img src="./assets/images/top-background.png" alt="top-background">
    <router-view @dialog-trigger="onDialogTrigger" :masked="propsItem.isMask" class="routerView"></router-view>
    <DDialog v-if="propsItem.isMask" :propsItem="propsItem" @child-ok="dialogOk">{{ dialogText }}</DDialog>
  </div>
</template>

<script>
import DDialog from './components/DDialog.vue';
export default {
  name: 'App',
  components: {
    DDialog,
  },
  data() {
    return {
      buttonValue: '下一步',
      to: '/vehicle',
      propsItem: {
        title: '通知',
        ok: '关闭',
        isMask: false, /* dialog显示与否，同时传给子组件使得在dialog出现时，一些组件失效不可操作 */
      },
      dialogText: '',
    }
  },
  methods: {
    dialogOk() {
      this.propsItem.isMask = false;
    },
    onDialogTrigger(e) {
      this.propsItem.isMask = true;
      this.dialogText = e;
    }
  },
}
</script>
<style scoped>
.coat {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

  background-color: #F4F7FA;

  position: relative;
}

.routerView {
  width: 93.6%;

  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  top: -20px;
}

img[alt="top-background"] {

  position: relative;
  width: 100%;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}
</style>